import {Callout} from "nextra/components";
import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Tile Group

A tile group that typically groups related information together.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.tile/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='default' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FTileGroup(
      label: const Text('Settings'),
      description: const Text('Personalize your experience'),
      children: [
        FTile(
          prefix: Icon(FIcons.user),
          title: const Text('Personalization'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.wifi),
          title: const Text('WiFi'),
          details: const Text('Forus Labs (5G)'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create tile-group
```

## Usage

### `FTileGroup(...)`

```dart copy
FTileGroup(
  scrollController: ScrollController(),
  style: FTileGroupStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  description: const Text('Personalize your experience'),
  semanticsLabel: 'Settings',
  divider: FItemDivider.indented,
  children: [],
);
```

### `FTileGroup.builder(...)`

```dart copy
FTileGroup.builder(
  scrollController: ScrollController(),
  style: FTileGroupStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  description: const Text('Personalize your experience'),
  semanticsLabel: 'Settings',
  divider: FItemDivider.indented,
  tileBuilder: (context, index) => index < 10 ? FTile(title: Text('Tile $index')) : null,
  count: 100,
);
```

### `FTileGroup.merge(...)`

```dart copy
FTileGroup.merge(
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  semanticsLabel: 'Settings',
  divider: FItemDivider.indented,
  children: [],
);
```

## Examples

### Behavior

#### Scrollable

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='scrollable' query={{}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {4} copy
    FTileGroup(
      label: const Text('Settings'),
      description: const Text('Personalize your experience'),
      maxHeight: 200,
      children: [
        FTile(
          prefix: Icon(FIcons.user),
          title: const Text('Personalization'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.mail),
          title: const Text('Mail'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.wifi),
          title: const Text('WiFi'),
          details: const Text('Forus Labs (5G)'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.alarmClock),
          title: const Text('Alarm Clock'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.qrCode),
          title: const Text('QR code'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Lazy Scrollable

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='lazy' query={{}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FTileGroup.builder(
      label: const Text('Settings'),
      description: const Text('Personalize your experience'),
      maxHeight: 200,
      count: 200,
      tileBuilder: (context, index) => FTile(
        title: Text('Tile $index'),
        suffix: Icon(FIcons.chevronRight),
        onPress: () {},
      ),
    );
    ```
  </Tabs.Tab>
</Tabs>

#### Merge Multiple Groups

This function merges multiple `FTileGroupMixin`s into a single group. It is useful for representing a group with
several sections.

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='merge' query={{}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FTileGroup.merge(
      label: const Text('Settings'),
      children: [
        FTileGroup(
          children: [
            FTile(
              prefix: Icon(FIcons.user),
              title: const Text('Personalization'),
              suffix: Icon(FIcons.chevronRight),
              onPress: () {},
            ),
            FTile(
              prefix: Icon(FIcons.wifi),
              title: const Text('WiFi'),
              details: const Text('Forus Labs (5G)'),
              suffix: Icon(FIcons.chevronRight),
              onPress: () {},
            ),
          ],
        ),
        FSelectTileGroup<String>(
          selectController: FSelectTileGroupController.radio('List'),
          children: [
            FSelectTile(title: const Text('List View'), value: 'List'),
            FSelectTile(title: const Text('Grid View'), value: 'Grid'),
          ],
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

### Appearance

#### Full Divider

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='default' query={{divider: 'full'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {3} copy
    FTileGroup(
      label: const Text('Settings'),
      divider: FItemDivider.full,
      children: [
        FTile(
          prefix: Icon(FIcons.user),
          title: const Text('Personalization'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.wifi),
          title: const Text('WiFi'),
          details: const Text('Forus Labs (5G)'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

#### No Divider

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tile-group' variant='default' query={{divider: 'none'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {3} copy
    FTileGroup(
      label: const Text('Settings'),
      divider: FItemDivider.none,
      children: [
        FTile(
          prefix: Icon(FIcons.user),
          title: const Text('Personalization'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FTile(
          prefix: Icon(FIcons.wifi),
          title: const Text('WiFi'),
          details: const Text('Forus Labs (5G)'),
          suffix: Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>
